<template>
  <div class="home_div">
    <div id="container" />
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'Mapview',
  data() {
    return {
      map: null
    }
  },
  created() {

  },
  mounted() {
    this.initAMap()
    this.showCityInfo()
  },
  methods: {

    initAMap() {
      AMapLoader.load({
        key: '8e467d87a61282d281b616d78dc35e76', // 设置您的key
        version: '2.0',
        plugins: ['AMap.ToolBar', 'AMap.Driving'],
        AMapUI: {
          version: '1.1',
          plugins: []

        },
        Loca: {
          version: '2.0'
        }
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          viewMode: '3D',
          zoom: 13,
          zooms: [2, 22],
          center: [117.220343, 31.780635]
        })
      }).catch(e => {
        console.log(e)
      })
    }

  }

}
</script>
<style  scoped>
    .home_div{
        padding:0px;
        margin: 0px;
        width: 600px;
        height: 550px;
        position: relative;
    }
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        position:absolute;
    }
</style>
